import React, { useEffect, useState } from 'react'
import Navbar from '../../components/Navbar'
import { Image, List } from 'antd-mobile'
import "../../style/mine.scss"
import { PayCircleOutline, TruckOutline, LikeOutline, SetOutline, FileOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { info } from '../../apis/user'
const demoSrc2 = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'

export default function Mine() {
  const [userinfo, setuserinfo] = useState<any>({})
  const navigate = useNavigate()
  useEffect(() => {
    if (localStorage.getItem("userid") == null) {
      navigate('/login')
    }
    info(localStorage.getItem("userid")).then((ok) => {
      setuserinfo(ok.data[0])
    })
  }, [])
  return (
    <div className='mine'>
      <Navbar right={<SetOutline fontSize={24} onClick={() => { navigate("/set") }} />} title="我的"/>

      <div className="userinfo">
        <Image
          src={demoSrc2}
          width={80}
          height={80}
          fit='cover'
          style={{ borderRadius: 32 }}
        />
        <p onClick={() => localStorage.getItem("username") ? "" : navigate("/login")}>{userinfo.username || (localStorage.getItem("username") ? localStorage.getItem("username") : "请点击登录")}</p>
      </div>

      <div className="order">
        <div>
          <PayCircleOutline fontSize={24} onClick={() => { navigate("/OrderSee", { state: { key: 'pay' } }) }} />
          <span>待付款</span>
        </div>
        <div>
          <TruckOutline fontSize={24} onClick={() => { navigate("/OrderSee", { state: { key: 'takeover' } }) }} />
          <span>代收货</span>
        </div>
        <div>
          <LikeOutline fontSize={24} onClick={() => { navigate("/OrderSee", { state: { key: 'appraise' } }) }} />
          <span>待评价</span>
        </div>
        <div>
          <FileOutline fontSize={24} onClick={() => { navigate("/OrderSee", { state: { key: 'allorder' } }) }} />
          <span>全部订单</span>
        </div>
      </div>

      <List>
        <List.Item onClick={() => { navigate("/addresslist") }}>
          地址管理
        </List.Item>
        <List.Item onClick={() => { }}>
          我的收藏夹
        </List.Item>
        <List.Item onClick={() => { }}>
          关于我们
        </List.Item>
      </List>
    </div>
  )
}
